<template>
  <a-menu
    :class="{ 'nav-layout-top': navLayout === 'top' }"
    :theme="navTheme"
    :open-keys.sync="openKeys"
    :mode="navLayout === 'left' ? 'inline' : 'horizontal'"
    @click="handleMenuClick"
    :defaultOpenKeys="['/main/dashboard']"
    :defaultSelectedKeys="['/dashboard/workbench']"
  >
    <template v-for="item in menuData">
      <!-- 一级目录 -->
      <a-sub-menu v-if="item.children" :key="item.path">
        <span slot="title" :key="item.path"
          ><a-icon :key="item.path" :type="item.icon" /><span>{{
            item.name
          }}</span></span
        >
        <template v-for="subItem in item.children">
          <!-- 二级目录 -->
          <a-sub-menu v-if="subItem.children" :key="subItem.path">
            <span slot="title" :key="item.path"
              ><span>{{ subItem.name }}</span></span
            >
            <!-- 三级目录 -->
            <a-menu-item
              v-for="subSubItem in subItem.children"
              :key="subSubItem.path"
              >{{ subSubItem.name }}</a-menu-item
            >
          </a-sub-menu>
          <a-menu-item v-else :key="subItem.path">{{
            subItem.name
          }}</a-menu-item>
        </template>
      </a-sub-menu>
      <a-menu-item v-else :key="item.path">
        <a-icon :type="item.icon" />
        <span>{{ item.name }}</span>
      </a-menu-item>
    </template>
  </a-menu>
</template>
<script>
export default {
  watch: {
    "$route.path": {
      handler(val, oldVal) {
        if (val != oldVal) {
          console.log(`新${val}  旧${oldVal}`);
          const index = val.lastIndexOf("/");
          const value = val.substring(0, index);
          if (oldVal.indexOf(value) === -1) {
            if (value.indexOf("search") > -1) {
              const index1 = value.lastIndexOf("/");
              const value1 = value.substring(0, index1);

              this.openKeys = [`/main${value1}`, `${value}`];
            } else {
              this.openKeys = [`/main${value}`];
            }
            console.log(this.openKeys);
          }
        }
      },
      deep: true,
    },
  },
  props: {
    navTheme: {
      type: String,
      require: true,
    },
    navLayout: {
      type: String,
      require: true,
    },
  },
  data() {
    const menuData = this.$router.options.routes[2]["children"];
    return {
      openKeys: ["/main/dashboard"],
      menuData,
    };
  },
  methods: {
    handleMenuClick(e) {
      if (e.key === this.$route.path) {
        return;
      }
      this.menuData.forEach((item) => {
        if (item.children) {
          item.children.forEach((itemSub) => {
            if (itemSub.children) {
              itemSub.children.forEach((itemSubSub) => {
                if (itemSubSub.path === e.key) {
                  this.$emit("handleBreadcrumb", [
                    item.name,
                    itemSub.name,
                    itemSubSub.name,
                  ]);
                }
              });
            } else {
              if (itemSub.path === e.key) {
                this.$emit("handleBreadcrumb", [item.name, itemSub.name]);
              }
            }
          });
        } else {
          if (item.path === e.key) {
            this.$emit("handleBreadcrumb", [item.name]);
          }
        }
      });
      this.$router.push({ path: e.key, query: { ...this.$route.query } });
    },
  },
};
</script>
<style lang="less" scoped>
.nav-layout-top {
  .ant-menu-horizontal {
    line-height: 64px;
    text-align: center;
  }
}
</style>
